<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>中华户外网-头像</title>
<jsp:include page="personcommonref.jsp"></jsp:include>
</head>

<body id="user">
	<div class="user_cover_bg"></div>
	<!--user box begin-->
	<div class="user_box">

		<%--	公共头部	 --%>
		<jsp:include page="indexHead.jsp"></jsp:include>

		<%--	个人信息公共	begin --%>
		<jsp:include page="personcommon.jsp"></jsp:include>
		<%--	个人信息公共	end  --%>
		<script src="../js/jquery-2.0.0.js"></script>
		<link type="text/css" href="../css/personinfo/jquery.Jcrop.css"
			rel="stylesheet">
		<script type="text/javascript" src="../js/personinfo/jquery.Jcrop.js"></script>
		<script type="text/javascript" src="../js/personinfo/jquery.nav.js"></script>
		<%
	String updateface = request.getParameter("updateface");
	if(updateface!=null && updateface.equals("true")){
%>
	<script>
		layer.open({
		title: '消息',
		content: '保存成功',
		icon:1
		}); 
	</script>
<%		
	}
%>
		<div class="user_box_rg">
			<ul class="tab">
				<li><a href="personinfo.jsp">我的信息</a></li>
				<li class="current"><a href="personface.jsp">我的头像</a></li>
				<li><a href="password.jsp">修改密码</a></li>
			</ul>

			<div class="user_header" name="face">
				<form action="UserAction_uploadPic.action" method="post"
					enctype="multipart/form-data">
					<div class="user_header_top">
						<img src="${session.user.headImg }">
							<p>支持jpg、png、jpeg、bmp格式，图片大小4M以内为最佳</p> <a href="javascript:void(0)"
							class="btn_blue">选择图片</a> <input type="file" name="faceimg"
							id="inputfile">
					</div>
				</form>

				<div class="user_header_bottom" style="display: none">
					<div class="user_header_bottom_pic">
						<img src="" id="cropbox" style="text-align: center;max-width:900px ">
					</div>

					<input type="hidden" id="x" name="x"> <input type="hidden"
						id="y" name="y"> <input type="hidden" id="w" name="w">
								<input type="hidden" id="h" name="h"> <input
									type="hidden" id="picurl" name="picurl" value=""> <input
										type="hidden" id="attid" name="attid" value="">
											<div class="user_header_bottom_btn">
												<a class="btn_blue" id="submit" href="javascript:void(0)">保存</a> <a
													class="btn_gray" href="javascript:void(0);" onclick="cancleFace()">取消</a>
											</div>
				</div>
			</div>

		</div>
	</div>

	</div>
	<!--user box end-->

	<%--	公共底部	 --%>
	<jsp:include page="indexFooter.jsp" />
	<script type="text/javascript">
		jQuery(document).ready(function() {
			//上传临时图片到附件服务器
			jQuery("#inputfile").change(function() {
				jQuery("form").serialize();
				var formData = new FormData();
				formData.append("pic", jQuery("#inputfile")[0].files[0]);
				//发送数据
				var url = "UserAction_uploadPic.action";
				jQuery.ajax({
					url : url,
					type : 'POST',
					data : formData,
					cache : false,
					contentType : false, //不可缺参数
					processData : false, //不可缺参数
					success : function(data) {
						var obj = eval('(' + data + ')');
						if (obj.status == 2000) {
							var attid = obj.info.id;
							var imgurl = obj.info.headImg;
							
							jQuery("#cropbox").attr("src", imgurl);
							jQuery("#picurl").val(imgurl);
							jQuery('#attid').val(attid);
							
							jQuery('#cropbox').Jcrop({
								onChange:updateCoords,
						        onSelect:updateCoords,
						        aspectRatio:1
							});
							jQuery('.user_header_bottom').show();
						} else {
							layer.open({
							  title: '消息',
							  content: obj.message,
							  icon:0
							});  
							return false;
						}
					}
				});
			});

			jQuery("#submit").click(function() {
				if (checkCoords()) {
					var x = jQuery("#x").val();
					var y = jQuery("#y").val();
					var w = jQuery("#w").val();
					var h = jQuery("#h").val();
					var picurl = jQuery("#picurl").val();
					var attid = jQuery("#attid").val();
					var url = "UserAction_cutPic.action";
					jQuery.ajax({
						type : "POST",
						url : url,
						data : {
							x : x,
							y : y,
							w : w,
							h : h,
							picurl : picurl,
							attid : attid
						},
						dataType : "json",
						async : "false",
						success : function(data) {
							if (data.status == 2000) {
								location.href = "personface.jsp?updateface=true";
							}
						}
					});
				}
			});
		});

		function updateCoords(c) {
			jQuery('#x').val(c.x);
			jQuery('#y').val(c.y);
			jQuery('#w').val(c.w);
			jQuery('#h').val(c.h);
		};
		function checkCoords() {
			if (parseInt(jQuery('#w').val()))
				return true;
				layer.open({
				  title: '消息',
				  content: '请裁剪后提交!',
				  icon:0
				});  
			return false;
		};

		function cancleFace() {
			jQuery('.user_header_bottom').hide();
			location.href = 'personface.jsp';
		}
	</script>
</body>
</html>
